// 为了防止 index 冲突将首页 命名为 home

.index
  .content
    display: flex;
    flex-wrap: wrap;
    +pc-layout()
      justify-content: space-between;
    +sp-layout()
      justify-content: space-around;
    article
      card-lignt()
      overflow:hidden;
      position: relative;
      +pc-layout()
        margin-bottom: 15px;
        width: 49.2%;
        &::before
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 150px;
          height: 100%;
          transform: skewX(-30deg);
          transition: left 1s ease 0s;
          z-index: $zIndex-1;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
          );
        &:hover
          transform: translateY(-6px);
          box-shadow: $card-shadow-hover;
          &::before
            left: 150%;
      +sp-layout()
        width: 94%;
        margin: 0 3% 4%;
      .post-overview
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .post-header
          position: relative;
          overflow: hidden;
          min-height: 50px;
          .post-image
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          .post-head
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0 12px;
            height: 50px;
            background-color: $bg-white-dim;
            box-shadow: 0 -1px 2px $bg-dark;
            +sp-layout()
              padding: 0 6px;
            .post-title,
            .post-image-source
              clip()
            .post-title
              font-size: $font-size-larger;
              font-weight: $font-weight-normal;
            .post-image-source
              font-size: $font-size-small;
              text-transform: capitalize;
              +sp-layout()
                transform: translateY(2px);
        .post-body
          padding: $card-padding;
          text-align: justify;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          margin: 0;
          font-size: $font-size-base;
          text-overflow: ellipsis;
          overflow: hidden;
          +pc-layout()
            -webkit-line-clamp: 3;
          +sp-layout()
            -webkit-line-clamp: 4;
          
        .post-meta-wrapper
          &::before
            content: '';
            position: absolute;
            top: 0;
            left: -20px;
            right: -20px;
            height: 1px;
            background: $bg-dark-line;
          margin: 0 14px;
          position: relative;
          z-index: $zIndex-2;
          max-width: 100%;
          height: 50px;
          flexCenter();
          +sp-layout()
            padding: 0 6px;
          .post-meta
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
            display: flex;
            word-break: keep-all;
            ::selection
              background: transparent;
              color: black;
           
            +sp-layout()
              & > span
                margin-right: 6px !important;
            & > span
              display: flex;
              align-items: center;
              margin-right: 12px;
              &: last-child
                margin-right: 0;
              span
                padding-right: 6px;
                &:last-child
                  padding-right: 0px;
              .icon-calendar, 
              .icon-fire, 
              .icon-tag,
              .icon-bookmark-empty
                margin-right: 4px;
              .icon-calendar
              .icon-fire
                margin-top: -2px;
        .post-link
          fillParent(absolute, $zIndex-1)



        
 
